<template>
  <view>
    <u-navbar
      height="50"
      :title="title"
      title-width="300"
      title-color="#333"
      title-size="36"
    ></u-navbar>
    <view class="contentView">
      <view class="itemView">
        <view class="required">*</view>
        <view class="itemTitle">联 系 人：</view>
        <input placeholder="请输入联系人" placeholder-style="color:#999" v-model="form.name" />
      </view>
      <u-line color="#DFE0E6"></u-line>
      <view class="itemView">
        <view class="required">*</view>
        <view class="itemTitle">联系方式：</view>
        <input placeholder="请输入联系方式" placeholder-style="color:#999" v-model="form.mobile" />
      </view>
      <u-line color="#DFE0E6"></u-line>
      <view class="itemView" @click.stop.prevent="onSetCity()">
        <view class="required">*</view>
        <view class="itemTitle">所在地区：</view>
        <input placeholder="请选择省市区县" :readonly="true" v-model="form.areaName" />
        <u-image src="/static/more.png" width="14rpx" height="28rpx"></u-image>
      </view>
      <u-line color="#DFE0E6"></u-line>
      <view class="itemView" style="padding-bottom: 150rpx">
        <view class="required">*</view>
        <view class="itemTitle">详细地址：</view>
        <input
          placeholder="街道、门牌号等"
          placeholder-style="color:#999"
          v-model="form.detailAddress"
        />
      </view>
    </view>
    <view class="contentView">
      <view class="itemView">
        <view class="itemTitle" style="flex: 1">默认地址：</view>
        <u-switch
          v-model="form.defaultStatus"
          inactive-color="#eee"
          active-color="#10A28F"
        ></u-switch>
      </view>
    </view>

    <view class="fixed-wapper">
      <view class="submit-btn" @click="submit()"> 保存</view>
    </view>
    <!-- <view class="submitBtn" @click="submit()">保存</view> -->
    <u-picker mode="region" v-model="cityPopup" @confirm="onCityConfirm"></u-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '添加新地址',
      cityPopup: false,
      city_desc: '',
      detail_address: '',
      contact_name: '',
      contact_phone: '',
      form: {
        name: '',
        mobile: '',
        detailAddress: '',
        string: '',
        defaultStatus: false,
        provinceId: '',
        cityId: '',
        areaId: ''
      }
    }
  },
  onLoad(options) {
    if (options.address != '0') {
      this.form = JSON.parse(options.address)
    }
    this.title = options.address ? '添加新地址' : '编辑收货地址'
  },
  methods: {
    onSetCity() {
      this.cityPopup = true
    },
    onCityConfirm(res) {
      this.form.provinceId = res.province.value
      this.form.cityId = res.city.value
      this.form.areaId = res.area.value

      this.form.areaName = res.province.label + ' ' + res.city.label + ' ' + res.area.label
    },
    submit() {
      console.log(this.form)
      let self = this
      if (self.$u.test.isEmpty(this.form.name)) {
        self.$u.toast('请输入联系人')
        return
      }

      if (self.$u.test.isEmpty(this.form.mobile)) {
        self.$u.toast('请输入联系电话')
        return
      }

      if (self.$u.test.isEmpty(this.form.areaName)) {
        self.$u.toast('请选择商家地址')
        return
      }

      if (self.$u.test.isEmpty(this.form.detailAddress)) {
        self.$u.toast('请输入详细地址')
        return
      }

      if (this.form.id) {
        self.$u.post('/app-api/member/address/update', this.form).then((res) => {
          if (res.code != 0) {
            self.$u.toast(res.msg)
            return
          }
          self.$u.toast('修改成功')
          setTimeout(function () {
            uni.navigateBack()
          }, 500)
        })
        return
      }

      self.$u.post('/app-api/member/address/create', this.form).then((res) => {
        if (res.code != 0) {
          self.$u.toast(res.msg)
          return
        }
        self.$u.toast('提交成功')
        setTimeout(function () {
          uni.navigateBack()
        }, 500)
      })
    }
  }
}
</script>

<style>
@import url('@/style/btn.css');

page {
  background: #eeeeef;
}

.required {
  color: #e62129;
  margin-right: 2rpx;
}

.contentView {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  margin-top: 20rpx;
}

.inputView {
  display: flex;
  flex-direction: column;
}

.inputTitle {
  font-size: 28rpx;
  font-weight: 400;
  color: #333333;
  padding: 20rpx 30rpx;
}

.inputView textarea {
  font-size: 28rpx;
  font-weight: 400;
  color: #333;
  height: 120rpx;
  padding: 0px 30rpx;
}

.itemView {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 35rpx 20rpx;
}

.itemTitle {
  width: 150rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: #333333;
}

.itemView input {
  flex: 1;
  font-size: 28rpx;
  font-weight: 400;
  color: #333333;
  margin-left: 20rpx;
}

.submitBtn {
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  background: #0f76bc;
  border-radius: 35rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: #ffffff;
  margin: 140rpx 20rpx;
}
</style>
